<template>
  <p>{{ msg }}</p>
  <!-- <CallbackItem ref="callbackItem" @some-event="someEvent" /> -->
  <CallbackItem v-model="msg">
    <template v-slot:content="{ msg }">
      <div>{{ msg }}</div>
    </template>
  </CallbackItem>
</template>

<!-- 父组件 -->
<script setup lang="ts">
import CallbackItem from './components/callback-item.vue'
import { ref, onMounted } from 'vue'

const msg = ref('hello vue3!')
// const callbackItem = ref()
// onMounted(() => {
//   console.log(callbackItem.value.msg) // hello vue3!
//   callbackItem.value.change() // hi vue3!
// })

function someEvent(value: string) {
  // child message
  console.log(value)
}
</script>
